<template>
  <div :class="cn('bg-card h-full rounded-md')">
    <VxeGrid v-bind="gridOptions" ref="gridRef" class="px-4">
      <template #toolbarButtons>
        <div class="pl-1 pt-2 text-lg font-bold">
          {{ tableTitle }}
          <!-- 提示 -->
          <VbenHelpTooltip v-if="tableTitlehelp" trigger-class="pb-1">
            {{ tableTitlehelp }}
          </VbenHelpTooltip>
        </div>
      </template>
      <template #toolbarTools>
        <ToolbarRightButtons
          :tool-bar-button-text="toolBarButtonText"
          @add="$emit('add')"
        />
      </template>
      <!-- 动态插槽渲染 -->
      <template v-for="(_, name) in $slots" #[name]="slotProps">
        <slot :name="name" v-bind="slotProps"></slot>
      </template>
      <!-- loading -->
      <template #loading>
        <slot name="loading">
          <VbenLoading :spinning="true" />
        </slot>
      </template>
    </VxeGrid>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

import { VbenHelpTooltip, VbenLoading } from '@vben/common-ui';
import { cn } from '@vben/utils';

import { VxeGrid } from 'vxe-table';

import { type VxeGridInstance, type VxeGridProps } from './type';
// 导入 ToolbarRightButtons 组件
import ToolbarRightButtons from './components/toolbar-right-buttons.vue';

const props = defineProps<Props>();

defineEmits<{
  (e: 'add'): void;
}>();

const gridRef = ref<VxeGridInstance<any>>();

interface Props {
  /** 表格配置 */
  gridOptions: VxeGridProps;
  /** 表格标题 */
  tableTitle?: string;
  /** 表格标题帮助 */
  tableTitlehelp?: string;
  /** 工具栏按钮文本 */
  toolBarButtonText?: string;
}
// 限制slot

// 暴露gridOptions供外部使用
defineExpose({
  gridOptions: computed(() => props.gridOptions),
  VxeGridRef: gridRef,
});
</script>
<style scoped lang="scss">
@use './style.scss';
</style>
